<template>
  <div class="institution-home">
    <!-- 头部导航栏 -->
    <div :class="{'header-fixed':isHeaderFixed}" class="header">
      <i class="el-icon-back" @click="goBack"></i>
      <span>机构主页</span>
      <i class="el-icon-refresh" @click="refreshData"></i>
    </div>
    <!-- 机构基本信息 -->
    <div class="institution-info">
      <img :src="introduction.data.imageUrl" alt="机构logo" class="logo" />
      <div class="details">
        <h2>{{ introduction.data.institutionName }}</h2>
        <div class="address">
          <i class="el-icon-location-pin"></i>
          <span class="address-text">{{ introduction.data.address }}</span>
        </div>
        <div class="contact">
          <van-cell is-link @click="showPopup"><van-icon class="dian" name="phone" /></van-cell>
        </div>
        <van-popup v-model="show" position="bottom" :style="{ height: '20%' }"><button class="lian"><span class="hua">联系电话：{{introduction.data.contactNumber}}</span></button></van-popup>
      </div>
    </div>
    <!-- 机构简介 -->
    <div class="introduction">
      <h3>机构简介</h3>
      <p>{{ introduction.data.introduction }}</p>
    </div>
    <!-- 医生团队 -->
    <div class="doctor-team">
      <h3>医生团队</h3>
      <!-- 这里传递 doctor.id 作为团队 ID -->
      <div v-for="(doctor,index) in doctorTeams.data" :key="index" class="doctor-item" @click="jinqu1(doctor.id)">
        <img :src="doctor.imageUrl" alt="医生团队logo" class="doctor-logo" />
        <div class="doctor-details">
          <h4 class="tuan">{{ doctor.teamName }}</h4>
          <div class="distance">
            <i class="el-icon-location-pin"></i>
            <span>签约人数：{{doctor.signUpCount}}</span>
          </div>
          <div class="rating">
            <i class="el-icon-star-on" v-for="(star,i) in doctor.ratingStars" :key="i"></i>
            <van-rate color="#FFD21E" v-model="doctorRatings[index]" allow-half void-icon="star" void-color="#eee" @change="handleRatingChange(index)"/>
            <span class="fen">{{doctorRatings[index]}}分</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 服务包 -->
    <div class="service-packages">
      <h3>服务包</h3>
      <div v-for="(servicePackage,index) in servicePackages.data" :key="index" class="doctor-item" @click="jinqu(servicePackage.id)">
        <img :src="servicePackage.serviceItems" alt="服务包logo" class="doctor-logo" />
        <div class="doctor-details">
          <h4 class="tuan">{{ servicePackage.packageName }}</h4>
          <div class="distance">
            <i class="el-icon-location-pin"></i>
            <span>服务对象：{{servicePackage.targetPopulation}}</span>
          </div>
          <div class="rating">
            <i class="el-icon-star-on" v-for="(star,i) in servicePackage.ratingStars" :key="i"></i>
            <span class="jin">￥{{servicePackage.price}}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      institution: {logoUrl: '', name: '', address: '', phone: '', institutionId: ''},
      isHeaderFixed: false,
      show: false,
      introduction: '',
      doctorTeams: [],
      servicePackages: [],
      doctorRatings: [],
      receivedInstitutionId: null
    };
  },
  created() {
    this.receivedInstitutionId = this.$route.query.institutionId;
    this.fetchInstitutionData();
    this.fetchDoctorTeamsData();
    this.fetchServicePackagesData();
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      if (window.pageYOffset > 0) {
        this.isHeaderFixed = true;
      } else {
        this.isHeaderFixed = false;
      }
    },
    showPopup() {
      this.show = true;
    },
    fetchInstitutionData() {
      if (this.receivedInstitutionId) {
        axios.get(`http://localhost:10086/api/user/medical_institution/findMedicalInstitutionById/${this.receivedInstitutionId}`)
            .then(response => {
              this.introduction = response.data;
              console.log(this.introduction);
            })
            .catch(error => {
              console.error('获取机构信息失败:', error);
            });
      }
    },
    fetchDoctorTeamsData() {
      if (this.receivedInstitutionId) {
        axios.get(`http://localhost:10086/api/doctor/doctor_team/getDoctorTeamByHospitalId/${this.receivedInstitutionId}`)
            .then(response => {
              this.doctorTeams = response.data;
              this.doctorRatings = this.doctorTeams.data.map(doctor => doctor.rating || 0);
            })
            .catch(error => {
              console.error('获取医生团队信息失败:', error);
            });
      }
    },
    fetchServicePackagesData() {
      if (this.receivedInstitutionId) {
        axios.get(`http://localhost:10086/api/service/service_package/findServicePackageByTeamId/${this.receivedInstitutionId}`)
            .then(response => {
              this.servicePackages = response.data;
            })
            .catch(error => {
              console.error('获取服务包信息失败:', error);
            });
      }
    },
    goBack() {
      this.$router.back();
    },
    jinqu(servicePackageId) {
      localStorage.setItem('servicePackageId', servicePackageId);
      this.$router.push({
        path: '/servicePackage1',
        query: {servicePackageId: servicePackageId}
      });
    },
    jinqu1(teamId) {
      localStorage.setItem('teamId', teamId);
      this.$router.push({
        path: '/doctorTeam1',
        query: {teamId: teamId}
      });
    },
    refreshData() {
      this.fetchInstitutionData();
      this.fetchDoctorTeamsData();
      this.fetchServicePackagesData();
    },
    handleRatingChange(index, value) {
      this.doctorRatings[index] = value;
      console.log(`医生团队 ${index} 的新评分是: ${value}`);
    }
  }
};
</script>

<style scoped>
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
}

.institution-home {
  max-width: 800px;
  margin: 0 auto;
  background-color: #F7FAFD;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 0 20px;
  position: relative;
  z-index: 1;
  transition: top 0.3s ease;
  margin-top: -10px;
}

.header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 100;
}

.header i {
  font-size: 24px;
  color: #333;
  cursor: pointer;
  transition: color 0.3s ease;
}

.header i:hover {
  color: #007bff;
}

.header span {
  font-size: 20px;
  font-weight: 500;
  color: #333;
}

.institution-info {
  display: flex;
  margin-top: 30px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.logo {
  width: 150px;
  height: 150px;
  border-radius: 20px;
  object-fit: cover;
  margin-right: 20px;
}

.details {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.details h2 {
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #333;
}

.address {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  color: #666;
}

.address i {
  margin-right: 5px;
}

.contact {
  display: flex;
  align-items: center;
  color: #007bff;
  cursor: pointer;
}

.contact i {
  margin-right: 5px;
}

.lian {
  width: 200px;
  font-size: 18px;
  color: #1f8eff;
  margin: 20px auto;
  display: block;
  background-color: #90f6bb;
  border: none;
  border-radius: 10px;
  text-align: center;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.lian:hover {
  background-color: #77e8a3;
}

.introduction {
  margin-top: 30px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.introduction h3 {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #333;
}

.introduction p {
  color: #666;
  margin-bottom: 0;
}

.doctor-team, .service-packages {
  margin-top: 30px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.doctor-team h3, .service-packages h3 {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 10px;
  color: #333;
}

.doctor-item {
  display: flex;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #e0e0e0;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.doctor-item:last-child {
  border-bottom: none;
}

.doctor-item:hover {
  background-color: #f9f9f9;
}

.doctor-logo {
  width: 70px;
  height: 70px;
  border-radius: 10px;
  object-fit: cover;
  margin-right: 20px;
}

.doctor-details h4 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 5px;
  color: #333;
}

.distance, .rating {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
}

.distance i, .rating i {
  margin-right: 5px;
}

.rating i {
  color: #f1c40f;
}

.jin {
  color: #FA7874;
  font-size: 20px;
  margin-left: auto;
}

.fen {
  margin-left: 5px;
}

.tuan {
  margin-left: 0;
}
</style>